import 'package:flutter/material.dart';
import 'package:flutter_hplus/components/tables/index.dart';
import 'package:flutter_hplus/theme/theme.dart';
import 'package:flutter_hplus/utils/logger.dart';

/// 基本表格页面
/// 
/// 展示基本的数据表格功能，包括排序、分页和搜索
class BasicTablePage extends StatefulWidget {
  /// 构造函数
  const BasicTablePage({super.key});

  @override
  State<BasicTablePage> createState() => _BasicTablePageState();
}

class _BasicTablePageState extends State<BasicTablePage> {
  // Flutter渲染引擎数据
  final List<Map<String, dynamic>> _engineData = [
    {'engine': 'Skia', 'platform': 'Android', 'architecture': 'ARM64', 'version': '3.19.0', 'performance': 'A+', 'status': '稳定', 'api': 'OpenGL/Vulkan', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '默认渲染引擎，性能良好'},
    {'engine': 'Skia', 'platform': 'Android', 'architecture': 'x86_64', 'version': '3.19.0', 'performance': 'A', 'status': '稳定', 'api': 'OpenGL/Vulkan', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '默认渲染引擎，性能良好'},
    {'engine': 'Skia', 'platform': 'iOS', 'architecture': 'ARM64', 'version': '3.28.0', 'performance': 'B+', 'status': '已弃用', 'api': 'Metal', 'features': '完全支持Flutter API', 'migration': '推荐迁移到Impeller', 'notes': '将在3.29完全移除'},
    {'engine': 'Impeller', 'platform': 'iOS', 'architecture': 'ARM64', 'version': '3.19.0', 'performance': 'A+', 'status': '稳定', 'api': 'Metal', 'features': '预编译着色器，无运行时编译', 'migration': '默认启用', 'notes': '在3.29成为唯一选项'},
    {'engine': 'Impeller', 'platform': 'iOS', 'architecture': 'ARM64', 'version': '3.29.0', 'performance': 'A+', 'status': '默认', 'api': 'Metal', 'features': '预编译着色器，无运行时编译', 'migration': '强制使用', 'notes': 'Skia已完全移除，部分API可能需要适配'},
    {'engine': 'Skia', 'platform': 'Windows', 'architecture': 'x86_64', 'version': '3.19.0', 'performance': 'B+', 'status': '稳定', 'api': 'OpenGL/DirectX', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '目前唯一选项'},
    {'engine': 'Skia', 'platform': 'macOS', 'architecture': 'ARM64', 'version': '3.19.0', 'performance': 'A', 'status': '稳定', 'api': 'Metal/OpenGL', 'features': '完全支持Flutter API', 'migration': '可选择迁移到Impeller', 'notes': '未来将逐步迁移到Impeller'},
    {'engine': 'Skia', 'platform': 'macOS', 'architecture': 'x86_64', 'version': '3.19.0', 'performance': 'A-', 'status': '稳定', 'api': 'Metal/OpenGL', 'features': '完全支持Flutter API', 'migration': '可选择迁移到Impeller', 'notes': '未来将逐步迁移到Impeller'},
    {'engine': 'Impeller', 'platform': 'macOS', 'architecture': 'ARM64', 'version': '3.19.0', 'performance': 'A+', 'status': '实验性', 'api': 'Metal', 'features': '大部分API支持，有少量功能缺失', 'migration': '通过flag启用', 'notes': '未来将成为默认选项'},
    {'engine': 'Impeller', 'platform': 'macOS', 'architecture': 'x86_64', 'version': '3.19.0', 'performance': 'B+', 'status': '实验性', 'api': 'Metal', 'features': '大部分API支持，有少量功能缺失', 'migration': '通过flag启用', 'notes': '未来将成为默认选项'},
    {'engine': 'Skia', 'platform': 'Linux', 'architecture': 'x86_64', 'version': '3.19.0', 'performance': 'B+', 'status': '稳定', 'api': 'OpenGL', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '目前唯一选项'},
    {'engine': 'Skia', 'platform': 'Linux', 'architecture': 'ARM64', 'version': '3.19.0', 'performance': 'B', 'status': '稳定', 'api': 'OpenGL', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '目前唯一选项'},
    {'engine': 'ANGLE', 'platform': 'Windows', 'architecture': 'x86_64', 'version': '3.19.0', 'performance': 'B+', 'status': '实验性', 'api': 'DirectX/OpenGL', 'features': '部分API支持', 'migration': '通过flag启用', 'notes': '针对某些GPU优化的备选方案'},
    {'engine': 'Impeller', 'platform': 'Android', 'architecture': 'ARM64', 'version': '3.19.0', 'performance': 'A', 'status': '默认', 'api': 'Vulkan', 'features': '预编译着色器，无运行时编译', 'migration': '默认启用', 'notes': '对于支持Vulkan的设备'},
    {'engine': 'Impeller', 'platform': 'Android', 'architecture': 'ARM64', 'version': '3.29.0', 'performance': 'A+', 'status': '默认', 'api': 'Vulkan', 'features': '预编译着色器，减少内存使用', 'migration': '默认启用', 'notes': '性能有明显提升'},
    {'engine': 'Impeller', 'platform': 'Android', 'architecture': 'ARM64', 'version': '3.29.0', 'performance': 'A', 'status': '默认', 'api': 'OpenGLES', 'features': '预编译着色器，无统一缓冲区', 'migration': '不支持Vulkan时的备选方案', 'notes': '在不支持Vulkan的设备上自动降级'},
    {'engine': 'Skia', 'platform': 'Web (CanvasKit)', 'architecture': 'WebAssembly', 'version': '3.19.0', 'performance': 'B', 'status': '稳定', 'api': 'WebGL', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '需要较大的下载体积'},
    {'engine': 'HTML', 'platform': 'Web (HTML)', 'architecture': 'JavaScript', 'version': '3.19.0', 'performance': 'C+', 'status': '稳定', 'api': 'DOM/CSS', 'features': '部分Flutter API有限制', 'migration': '无需迁移', 'notes': '兼容性好，体积小，性能较低'},
    {'engine': 'HTML', 'platform': 'Web (HTML)', 'architecture': 'JavaScript', 'version': '3.29.0', 'performance': 'C', 'status': '已弃用', 'api': 'DOM/CSS', 'features': '部分API有限制', 'migration': '已移除，需迁移到CanvasKit', 'notes': '已完全移除，不再支持'},
    {'engine': 'Skia', 'platform': 'Fuchsia', 'architecture': 'ARM64', 'version': '3.19.0', 'performance': 'B+', 'status': '实验性', 'api': 'Vulkan', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '谷歌实验性操作系统'},
    {'engine': 'Impeller', 'platform': 'iOS', 'architecture': 'ARM64', 'version': '3.16.5', 'performance': 'A', 'status': '稳定', 'api': 'Metal', 'features': '缺少部分API支持', 'migration': '默认启用，可关闭', 'notes': '不支持部分Paint选项和渐变功能'},
    {'engine': 'Skia', 'platform': 'Windows', 'architecture': 'x86_64', 'version': '3.16.5', 'performance': 'B', 'status': '稳定', 'api': 'OpenGL/DirectX', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '目前唯一选项'},
    {'engine': 'Skia', 'platform': 'macOS', 'architecture': 'ARM64', 'version': '3.16.5', 'performance': 'A-', 'status': '稳定', 'api': 'Metal/OpenGL', 'features': '完全支持Flutter API', 'migration': '可选择迁移到Impeller', 'notes': '未来将逐步迁移到Impeller'},
    {'engine': 'Skia', 'platform': 'Linux', 'architecture': 'x86_64', 'version': '3.16.5', 'performance': 'B', 'status': '稳定', 'api': 'OpenGL', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '目前唯一选项'},
    {'engine': 'Skia', 'platform': 'Web (CanvasKit)', 'architecture': 'WebAssembly', 'version': '3.16.5', 'performance': 'B-', 'status': '稳定', 'api': 'WebGL', 'features': '完全支持Flutter API', 'migration': '无需迁移', 'notes': '需要较大的下载体积'},
  ];
  
  // 表格列定义
  final List<HDataColumn> _columns = [
    const HDataColumn(label: 'Flutter 渲染引擎', field: 'engine', width: 150),
    const HDataColumn(label: '运行平台', field: 'platform', width: 120),
    const HDataColumn(label: 'CPU架构', field: 'architecture', width: 100),
    const HDataColumn(label: '引擎版本', field: 'version', width: 100),
    const HDataColumn(label: '性能', field: 'performance', width: 70), 
    const HDataColumn(label: '支持状态', field: 'status', width: 100),
    const HDataColumn(label: '图形API', field: 'api', width: 140),
    const HDataColumn(label: '主要特性', field: 'features', width: 270),
    const HDataColumn(label: '迁移建议', field: 'migration', width: 180),
    const HDataColumn(label: '备注', field: 'notes'),
  ];

  @override
  Widget build(BuildContext context) {
    final theme = HTheme.of(context);
    
    return Container(
      padding: EdgeInsets.only(top: theme.dimens.spacingM),
      color: theme.colors.background, // 灰色背景，与原HTML页面一致
      // 使用Expanded来铺满剩余空间
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: _buildTableCard(
              theme: theme,
              title: '基本表格',
              subtitle: '分类，查找',
              content: HDataTable(
                columns: _columns,
                data: _engineData,
                showBorder: true,
                showStripes: true,
                showHover: true,
                enablePagination: true,
                enableSearch: true,
                rightActions: [
                  // 添加右侧示例按钮
                  IconButton(
                    icon: const Icon(Icons.help_outline),
                    tooltip: '帮助',
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('这是基本表格的帮助信息')),
                      );
                    },
                  ),
                ],
                onRowTap: (row) {
                  logger.i('点击了行: ${row['engine']}');
                  // 在实际应用中，可以显示详情对话框
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('点击了 ${row['engine']}')),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
  
  /// 构建表格卡片
  Widget _buildTableCard({
    required HTheme theme,
    required String title,
    required Widget content,
    String? subtitle,
    List<Widget>? headerActions,
  }) {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(0), // 方形卡片，与原HTML页面一致
      ),
      margin: EdgeInsets.zero,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 卡片标题
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
            decoration: BoxDecoration(
              color: Colors.white,
            ),
            child: Row(
              children: [
                Text(
                  title,
                  style: theme.textStyles.h3,
                ),
                if (subtitle != null) ...[
                  const SizedBox(width: 8),
                  Text(
                    subtitle,
                    style: theme.textStyles.secondary.copyWith(
                      fontSize: 12,
                    ),
                  ),
                ],

                const SizedBox(width: 16),
                // 头部操作按钮
                if (headerActions != null) ...headerActions,

                const Spacer(),
                // 工具按钮
                _buildToolButton(
                  icon: Icons.keyboard_arrow_up,
                  tooltip: '折叠',
                  onPressed: () {},
                ),
                _buildToolButton(
                  icon: Icons.settings,
                  tooltip: '设置',
                  onPressed: () {},
                ),
                _buildToolButton(
                  icon: Icons.close,
                  tooltip: '关闭',
                  onPressed: () {},
                ),
              ],
            ),
          ),
          
          // 表格内容 - 使用Expanded包裹内容区域
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0, top: 8.0),
              child: content,
            ),
          ),
        ],
      ),
    );
  }
  
  /// 构建工具按钮
  Widget _buildToolButton({
    required IconData icon,
    required String tooltip,
    required VoidCallback onPressed,
  }) {
    return IconButton(
      icon: Icon(icon, size: 18),
      onPressed: onPressed,
      tooltip: tooltip,
      padding: const EdgeInsets.all(8.0),
      constraints: const BoxConstraints(),
      splashRadius: 20,
    );
  }
}
